<template>
  <page-header-wrapper :title="false">
    <a-card title="待审核发票">
      <!--      <template slot="extra">-->

      <!--        <a-button size="small" type="primary" icon="plus" @click="addModal">添加发票</a-button>-->
      <!--      </template>-->
      <a-tabs type="card" @change="onTabs">
        <a-tab-pane key="10">
          <span slot="tab">
            <a-badge :count="invoiceNum.invoiceDshCounts">待审核</a-badge>
          </span>
        </a-tab-pane>
        <a-tab-pane key="20">
          <span slot="tab">
            <a-badge :count="invoiceNum.invoiceZstgCounts">组审已审</a-badge>
          </span>
        </a-tab-pane>
        <a-tab-pane key="30">
          <span slot="tab">
            <a-badge :count="invoiceNum.invoiceZsbgCounts">组审不过</a-badge>
          </span>
        </a-tab-pane>
        <a-tab-pane key="40">
          <span slot="tab">
            <a-badge :count="invoiceNum.invoiceYkpCounts">已开票</a-badge>
          </span>
        </a-tab-pane>
        <a-tab-pane key="50">
          <span slot="tab">
            <a-badge :count="invoiceNum.invoiceCsbgCounts">财审不过</a-badge>
          </span>
        </a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="顾问姓名">
                <a-select
                  show-search
                  v-model="queryParam['filter[adviser_uid]']"
                  placeholder="选择顾问姓名"
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="申请时间">
                <a-range-picker @change="onCreateAt" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
                <span class='table-page-search-submitButtons'>
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                 <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="invoiceColumns"
        :data="invoiceData"
      >
        <template slot="contract_no" slot-scope="text, record">
          <a-button v-if="text == '合并合同'" type="link" @click="toDetail(record.id)">{{text}}</a-button>
          <a-button v-else type="link" @click="$router.push({ name: 'ContractDetail', params: { id: record.contract_id } })">{{text}}</a-button>
        </template>
        <template slot="tm_name" slot-scope="text,record">
          {{text}}{{record.pt_name}}
        </template>
        <template slot="invoice_type" slot-scope="text">
          <a-tag v-if="text == 20" color="red">{{typeOpts[text]}}</a-tag>
          <a-tag v-if="text == 10" color="blue">{{typeOpts[text]}}</a-tag>
        </template>
        <template slot="header_type" slot-scope="text">
          <a-tag color="red">{{headerOpts[text]}}</a-tag>
        </template>
        <template slot="amount" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="status" slot-scope="text">
          <a-tag color="red">{{statusOpts[text]}}</a-tag>
        </template>
        <template slot="company_name" slot-scope="text,record">
          {{text}}({{record.tax_point}}%)
        </template>
        <template slot="file_url" slot-scope="text,record">
          <a-button size="small" type="link" @click="download(text)">{{record.filename}}</a-button>
        </template>
        <template slot="is_check" slot-scope="text">
          <div v-if="text == 1">再次审核</div>
          <div v-else>初次审核</div>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button v-if="record.status == 10" size="small" type="danger" @click="checkInvoice(record.id)" style="margin-right: 5px;">审核</a-button>
          <a-badge dot v-if="record.is_read == 0">
            <a-button size="small" type="primary" @click="toDetail(record.id)">查看</a-button>
          </a-badge>
          <a-button v-else size="small" type="primary" @click="toDetail(record.id)">查看</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title="编辑审核组员发票"
      v-model="visible"
      @ok="submitCheckStatus"
      @cancel="onCancel"
      :confirm-loading="loading"
      :width="400"
    >
      <a-form-model
        ref="statusForm"
        :model="statusForm"
        :rules="statusRules"
      >
        <a-form-model-item prop="type">
          <a-radio-group v-model="statusForm.type">
            <a-radio value="1">审核通过</a-radio>
            <a-radio value="2">审核不过</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item prop="notes">
          <a-textarea placeholder="" :rows="4" v-model="statusForm.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/invoice'
import { getCheckInvoice, getInvoiceList, postCheckInvoice, getInvoiceNum, SetInvoiceRead } from '@/api/invoice'

export default {
  components: {
    STable
  },
  name: 'CheckInvoice',
  data () {
    return {
      invoiceColumns: col.invoice,
      invoiceData: parameters => {
        return getInvoiceList(Object.assign(parameters, this.queryParam)).then(res => {
          this.typeOpts = res.result.invoice_type_opts
          this.statusOpts = res.result.status_opts
          this.headerOpts = res.result.header_type_opts
          this.adviserOpts = res.result.adviser_array
          return res.result
        })
      },
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      queryParam: {},
      typeOpts: {},
      statusOpts: {},
      headerOpts: {},
      adviserOpts: {},
      advanced: true,
      visible: false,
      statusForm: {},
      invoiceNum: {},
      statusRules: {
        type: [{ required: true, message: '必须选择一项状态', trigger: 'change' }]
      },
      loading: false
    }
  },
  created () {
    this.queryParam['filter[status]'] = 10
    this.getInvoiceNum()
  },
  methods: {
    getInvoiceNum () {
      getInvoiceNum().then(res => {
        this.invoiceNum = res.result
      })
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset (clearFilters) {
      clearFilters()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearch () {
      // this.queryParam = {}
      // this.queryParam['filter[contract_no]'] = ''
       this.queryParam['filter[adviser_uid]'] = ''
      // this.queryParam['filter[tm_name]'] = ''
       this.queryParam['filter[created_at_start]'] = ''
       this.queryParam['filter[created_at_end]'] = ''
      this.$refs.table.refresh(true)
    },
    checkInvoice (id) {
      getCheckInvoice(id).then(res => {
        if (res.status === 0) {
          this.statusForm['invoice_id'] = id
          this.visible = true
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    download (url) {
      window.open(url)
    },
    toContractDetail (id) {
      this.$router.push({ name: 'ContractDetail', params: { cid: id } })
    },
    submitCheckStatus () {
      const app = this
      app.loading = true
      app.$refs.statusForm.validate(valid => {
        if (valid) {
          postCheckInvoice(app.statusForm).then(res => {
            app.onCancel()
            app.$refs.table.refresh(true)
            this.getInvoiceNum()
          })
        } else {
          app.loading = false
          return false
        }
      })
    },
    onCancel () {
      this.statusForm = {}
      this.visible = false
      this.loading = false
    },
    onTabs (key) {
      this.queryParam['filter[status]'] = key
      this.$refs.table.refresh(true)
    },
    toDetail (id) {
      SetInvoiceRead(id)
      this.getInvoiceNum()
      this.$refs.table.refresh(true)
      this.$router.push({ name: 'InvoiceDetail', params: { id } })
    },
    onCreateAt (date, dateString) {
      this.queryParam['filter[created_at_start]'] = dateString[0]
      this.queryParam['filter[created_at_end]'] = dateString[1]
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style scoped>
/deep/.ant-badge-count{right: -7px;top: -3px;}
  /deep/.ant-table-fixed .ant-btn.ant-btn-link{padding: 0;}
</style>
